<div class="topBar">
    <div class="avatarBox" style="text-align: center;">
        <nz-avatar nzText='史家乐' style="margin-top: 20px;animation: bgcChange 4s infinite alternate;width:80px;height: 80px;line-height: 80px;"></nz-avatar>
        <br>
        <i nz-popover nzPopoverPlacement="bottom" [nzPopoverTitle]="titleTemplate1" [nzPopoverContent]="contentTemplate1" style="font-size: 30px;margin: 20px;animation: cChange 4s infinite alternate;" nz-icon nzType="wechat" nzTheme="outline"></i>
        <i nz-popover [nzPopoverTitle]="titleTemplate2" [nzPopoverContent]="contentTemplate2" style="font-size: 30px;margin: 20px;animation: cChange 4s infinite alternate;" nz-icon nzType="qq" nzTheme="outline"></i>
        <ng-template #titleTemplate1>
            <i nz-icon nzType="wechat"></i>
            WeChat
          </ng-template>
          <ng-template #contentTemplate1>
            <img src="../../../assets/images/weChat.jpg" alt="">
          </ng-template>
          <ng-template #titleTemplate2>
            <i nz-icon nzType="qq"></i>
            QQ
          </ng-template>
          <ng-template #contentTemplate2>
            <a href="https://mail.qq.com/">1647246035@qq.com</a>
          </ng-template>
    </div>
    <div class="textBox">
        <pre>
22年毕业，实习中，努力学好前端，了解后端，加油！
        </pre>
        <pre>
此博客前端基于angular和antd
后端使用C#webapi和mysql数据库
做了响应式，可以简单适配移动端
感谢你的参观
        </pre>
    </div>
</div>
